<template>
  <div>
    <header :class="['home-header', 'wrap', { 'header-active': headerActive }]">
      <i class="iconfont icon-caidan"></i>
      <div class="header-search">
        <span class="app-name">G</span>
        <i class="iconfont icon-search"></i>
        <span class="search-title">家电返场同价11.11</span>
      </div>
     <router-link v-if="!$store.getters.getIsLogin" tag="span" to="/login">登录</router-link>
      <router-link class="iconfont icon-iconyonghu" v-else tag="i" to="/user"> </router-link>
    </header>

    <!-- 轮播图区域 -->
    <van-swipe
      :autoplay="3000"
      indicator-color="white"
      class="swiper-container"
    >
      <van-swipe-item v-for="(item, index) in sliderList" :key="index">
        <img :src="item.imgUrl" class="swiper_img" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 分类 -->
    <section class="category-list">
      <div
        v-for="(item, index) in categoryList"
        :key="index"
        @click="$router.push('/product-list')"
      >
        <img :src="item.imgUrl" />
        <span>{{ item.name }}</span>
        <!-- <router-link to="/category" tag="i" class="incofont icon-caidan"></router-link> -->
      </div>
    </section>

    <!-- 购物楼层制作 -->
    <section class="floor-list">
      <div class="floor-wrap" v-for="(floor, index) in floorList" :key="index">
        <img class="floor-head" :src="floor.headUrl" />
        <div class="floor-content">
          <div
            class="floor-category"
            v-for="(category, index) in floor.list"
            :key="index"
          >
            <p>{{ category.title }}</p>
            <p>{{ category.desc }}</p>
            <div class="floor-products">
              <img
                :src="product.imgUrl"
                v-for="(product, index) in category.products"
                :key="index"
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 底部tab -->
    <tabBar></tabBar>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar";
import { getSliders, getCategoryies, getFloors, getUserInfo } from "../../api";
export default {
  data() {
    return {
      sliderList: [],
      floorList: [],
      categoryList: [],
      headerActive: false,
      isLogin:false
    };
  },
  components: {
    tabBar,
  },
  created() {
    getSliders((res) => {
      // console.log(res);
      this.sliderList = res.data;
    });
    getCategoryies().then((res) => {
      this.categoryList = res;
    });
    getFloors().then((res) => {
      this.floorList = res;
    });
  },
  mounted() {
    // 添加滚动事件
    window.addEventListener("scroll", this.pageScroll);
  },
  methods: {
    pageScroll() {
      // 获取滚动距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop > 100
        ? (this.headerActive = true)
        : (this.headerActive = false);
    },
    beforeCreate() {
      getUserInfo().then((res) => {
        res.status == 0 ? (this.isLogin = true) : (this.isLogin = false);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin";
.header-active {
  background: red;
}
.home-header {
  position: fixed;
  left: 0;
  top: 0;
  @include fj;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  @include boxSizing;
  font-size: 30px;
  color: #fff;
  z-index: 10000;
  // background: red;

  .icon-caidan {
    font-size: 50px;
  }

  .header-search {
    display: flex;
    width: 74%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #fff;
    @include borderRadius(40px);

    .app-name {
      padding: 0 20px;
      color: $red;
      font-size: 40px;
      font-weight: bold;
      border-right: 1px solid #666;
    }

    .icon-search {
      padding: 0 20px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
    }
  }

  .icon-iconyonghu {
    font-size: 44px;
  }
}

//轮播样式
.swiper-container {
  .swiper_img {
    width: 100%;
  }
}
//分类样式
.category-list {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 26px;

  div {
    display: flex;
    flex-direction: column;
    width: 20%;
    text-align: center;

    img {
      width: 80px;
      height: 80px;
      margin: 26px auto 16px auto;
    }
  }
}

//购物楼层样式
.floor-list {
  width: 100%;
  padding-bottom: 100px;

  .floor-head {
    width: 100%;
    height: 80px;
    background: #f6f6f6;
  }

  .floor-content {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    width: 100%;
    @include boxSizing;

    .floor-category {
      width: 50%;
      padding: 20px;
      border-right: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;
      @include boxSizing;

      &:nth-child(2n) {
        border-right: none;
      }

      p {
        font-size: 34px;
        color: #333;

        &:nth-child(2) {
          padding: 10px 0;
          font-size: 26px;
          color: $red;
        }
      }

      .floor-products {
        display: flex;
        justify-content: space-around;
        width: 100%;

        img {
          width: 130px;
          height: 130px;
        }
      }
    }
  }
}
</style>